<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>基础语法3：v-bind属性绑定</title>
        <script src="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <h1>知识点1：html插值</h1>
            <h3>
                可以动态的渲染DOM节点，常用来处理开发者不可预知或难以控制的DOM结构
                注意：在网页上动态渲染html是比较危险的，容易造成漏洞被黑客攻击
            </h3>
            <p v-html="vh"></p>

            <h1>知识点2：v-pre指令</h1>
            
            <h3>
                1.它可以让代码所在的节点跳过编译
                2.可以利用它跳过没有指令语法的节点，可以加快速度
            </h3>

            <p>例子:</p>
            <p v-pre>我的工资是{{price}}元</p>

            <h1>知识点3：v-bind属性绑定</h1>
            <h3>1.文本插值表达式不能在html属性中使用，如果我们想要动态的调整属性，就需要使用v-bind绑定</h3>

            <p>没有使用v-bind</p>
            <p title="titleName">我们没有进行属性绑定</p>
            <p>使用v-bind</p>
            <p v-bind:title='titleName'>我们进行了属性绑定，这样我们的属性就可以动态的进行调整</p>

            <h3>2.v-bind可以简写成：</h3>
            <P :title="price">我进行了省略，因为用的太多了</P>
            <h3>3.除了绑定变量外还可以绑定表达式执行函数等，注意最后的结果要符合属性的自身的要求</h3>
            <p>例子：绑定表达式</p>
            <button :disabled="1+1==9">点击有奖</button>
            <input type="text" :placeholder="false?'请输入':'请录入'">
            <p>例子：图片的动态绑定</p>
            <img :src="imgSrc" alt="">
            <h3>通过改变type值，实现文本框，单选框，复选框的转换</h3>
            <input type="text">
            <input type="radio">
            <input type="checkbox">
            <p>代码实现</p>
            <input :type="typeName"><br>
            <button @click="typeName='text'">文本框</button>
            <button @click="typeName='radio'">单选框</button>
            <button @click="typeName='checkbox'">复选框</button>
            <h3>课堂小练习：通过动态的改变属性，完成更改字体大小和颜色</h3>
            <span :style="{color: colorName,fontSize:size+'px'}">我是一行等待改变的文字</span>
            <button @click="colorName='green'">改成绿色</button>
            <button @click="colorName='blue'">改成蓝色</button>
            <button @click="colorName='yellow'">改成黄色</button>
            <button @click="size++">字体变大</button>
            <button @click="size--">字体变小</button>

        </div>
    </body>
</html>

<script>
    const connApp = Vue.createApp({
        data() {
            return {
                vh:"<p>我是动态生成的html代码</p>",
                price:1000000,
                titleName:"都说了别碰我，你还碰我",
                imgSrc:'./两个兄弟.png',
                typeName:'text',
                colorName:'green',
                size:10,
            }
        },
    }).mount("#app")
</script>